<template>
	<view>
		<view class="carousel" @touchstart="touchStart" @touchend="touchEnd($event, currentIndex)">
			<view class="carousel-content" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
				<view class="card" v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="header">
							<view>{{ getQuestionType(item.type) }}</view>
							<view><text class="index">{{ index + 1 }}</text> / {{ list.length }}</view>
						</view>
						<view class="content">
							<view style="padding: 20upx;">{{ item.title }}</view>
							<view v-for="(option, optIndex) in getOptions(item.options)" :key="optIndex">
								<view @click="selectAnswer(item.id, option)" class="option" :style="{
                  backgroundColor: submitted && selectedAnswers[item.id] !== undefined && option === item.answer ? '#71d5a1' :
                                  submitted && selectedAnswers[item.id] !== undefined && option === selectedAnswers[item.id] ? '#fab6b6' :
                                  'white',
                  color: submitted && selectedAnswers[item.id] !== undefined && option === item.answer ? '#18b566' :
                         submitted && selectedAnswers[item.id] !== undefined && option === selectedAnswers[item.id] ? '#dd6161' :
                         'black',
                }">
									{{ String.fromCharCode(65 + optIndex) }}: {{ option }}
								</view>
							</view>
						</view>
					</view>

					<view v-if="submitted && selectedAnswers[item.id] !== undefined">
						<view v-if="item.answer === selectedAnswers[item.id]">
							<view style="color: green;">正确答案: {{ item.answer }}</view>
						</view>
						<view v-else>
							<view style="color: red;">你选择的答案: {{ selectedAnswers[item.id] }}</view>
							<view style="color: green;">正确答案: {{ item.answer }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="itemIocn">
				<view class="icon">
					<u-icon name="checkmark-circle" size="40"></u-icon>
					<view style="color: #18b566;">{{ correctCount }}</view>
				</view>
				<view class="icon">
					<u-icon name="close-circle" size="40"></u-icon>
					<view style="color: #dd6161;">{{ wrongCount }}</view>
				</view>
				<view class="icon" @click="popup">
					<u-icon name="grid" size="40"></u-icon>
					<view>{{ currentIndex + 1 }} / {{ list.length }}</view>
				</view>
				<view class="icon">
					<u-icon name="star" size="40"></u-icon>
					<view>收藏</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showPopup" mode="bottom">
			<view class="popup-content">
				<view class="itemIocn">
					<view class="icon">
						<u-icon name="checkmark-circle" size="40"></u-icon>
						<view style="color: #18b566;">{{ correctCount }}</view>
					</view>
					<view class="icon">
						<u-icon name="close-circle" size="40"></u-icon>
						<view style="color: #dd6161;">{{ wrongCount }}</view>
					</view>
					<view class="icon">
						<u-icon name="grid" size="40"></u-icon>
						<view>{{ currentIndex + 1 }} / {{ list.length }}</view>
					</view>
					<view class="icon">
						<view @click="clearRecords">清空记录</view>
					</view>
				</view>
				<view style="display: flex; flex-wrap: wrap; margin: 40upx 0; margin-top: 80upx; margin-left: 30upx;">
					<view v-for="(item, index) in list" :key="index" @click="goToQuestion(index)" class="popup-option">
						<view class="circle" :style="{
              backgroundColor: selectedAnswers[item.id] !== undefined ? (item.answer === selectedAnswers[item.id] ? '#71d5a1' : '#fab6b6') : '',
              color: selectedAnswers[item.id] !== undefined ? (item.answer === selectedAnswers[item.id] ? '#18b566' : '#dd6161') : '',
            }">{{ index + 1 }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				currentIndex: 0,
				submitted: false,
				selectedAnswers: {},
				correctCount: 0,
				wrongCount: 0,
				showPopup: false
			};
		},
		methods: {
			goToQuestion(index) {
				this.currentIndex = index;
				this.showPopup = false;
			},
			popup() {
				this.showPopup = true;
			},
			selectAnswer(itemId, option) {
				if (this.submitted && this.selectedAnswers[itemId] !== undefined) return;

				this.submitted = true;
				this.$set(this.selectedAnswers, itemId, option);
				const correctAnswer = this.list.find(item => item.id === itemId).answer;
				if (option === correctAnswer) {
					this.correctCount++;
				} else {
					this.wrongCount++;
				}
			},
			getOptions(optionsStr) {
				return optionsStr.split(';');
			},
			getQuestionType(type) {
				if (type === 0) return '单选题';
				if (type === 1) return '多选题';
				if (type === 2) return '判断题';
				return '';
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			touchEnd(e) {
				const moveX = e.changedTouches[0].pageX - this.startX;
				if (moveX < -100 && this.currentIndex < this.list.length - 1) {
					this.currentIndex++;
				} else if (moveX > 100 && this.currentIndex > 0) {
					this.currentIndex--;
				}
			},
			clearRecords() {
				this.selectedAnswers = {};
				this.correctCount = 0;
				this.wrongCount = 0;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.carousel {
		height: 92vh;
		overflow: hidden;
		touch-action: pan-y;

		.carousel-content {
			display: flex;
			transition: transform 0.3s ease;
			width: 100%;
			padding: 20upx;
			height: 100%;

			.card {
				min-width: 100%;
				box-sizing: border-box;
				height: 100%;

				&:not(:first-child) {
					margin-left: 40upx; // 设置后续卡片的左边距
				}

				.item {
					background-color: #fff;
					border-radius: 5px;
					border: 1px solid #fff;
				}

				.header {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #c8c9cc;
					padding: 20upx;
				}

				.index {
					font-weight: bold;
				}

				.option {
					margin: 20upx;
					padding: 20upx;
					cursor: pointer;
					border: 1px solid #c8c9cc;
					border-radius: 5px;
				}
			}
		}
	}


	.footer {
		width: 100%;
		padding: 20upx 0;
		padding-bottom: 40upx;
		background-color: #f5f5f5;
		z-index: 99;


		.itemIocn {
			display: flex;
			justify-content: space-between;
			padding: 0 20upx;

			.icon {
				display: flex;
				justify-content: center;

				view {
					margin-left: 10upx;
					font-size: 25upx;
				}
			}
		}
	}

	.popup-content {
		background-color: white;
		border-radius: 8px;
		height: 1000upx;

		.itemIocn {

			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 20upx;

			.icon {
				display: flex;
				justify-content: center;

				view {
					margin-left: 10upx;
					font-size: 25upx;
				}
			}
		}

		.popup-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.popup-option {
			padding: 10upx;
			display: flex;
			flex-direction: row;
			margin: 0 10upx;

			.circle {
				display: flex;
				flex-direction: column;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				color: #c8c9cc;
				text-align: center;
				line-height: 50px;
				border: 1px solid #c8c9cc;
			}
		}
	}
</style>